<script setup>
defineOptions({
  name: 'YLocalSelect',
});
import { OPTIONS } from '@/constants/options';
const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: '',
  },
  option: {
    type: String,
    default: 'YES_NO',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  labelPath: {
    type: String,
    default: 'label',
  },
  valuePath: {
    type: String,
    default: 'value',
  },
});
const defaultOptions = [{label:'请选择', value: ''}];
const emit = defineEmits(['update:modelValue','change']);

const options = computed(() => {
  return OPTIONS[props.option] || defaultOptions;
});
const selectedValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    const row = options.value.find((item) => item[props.valuePath] === val);
    emit('change', val,row);
    emit('update:modelValue', val);
  },
});
</script>

<template>
  <a-select v-model:value="selectedValue" :disabled="disabled">
    <a-select-option
      v-for="option in options"
      :key="option[valuePath]"
      :value="option[valuePath]"
    >
      {{ option[labelPath] }}
    </a-select-option>
  </a-select>
</template>

<style scoped>
:deep(.ant-select-selector){
  background-color: transparent !important;
}
</style>